<template>
  <div class="main">
    <div class="header">
    <addMenu @submitForm="submitForm" :form="addForm" :msg="'新增菜单'" :title="'新增菜单'" @is_point_label="isPoint"></addMenu>
    </div>

    <menuList :tableData="userObject"  @remove="remove" @editSubmit="search()"></menuList>

  </div>
</template>

<script>
import addMenu from '@/components/user/addMenu.vue'
import menuList from '@/components/user/menuList.vue'
import { list, add, remove } from '@/api/base/menus'

export default {
  components: { addMenu, menuList },
  data () {
    return {
      userList: [],
      addForm: {
        pid: '',
        is_point: false,
        code: '',
        title: '',
        id: ''
      },
      userObject: {}
    }
  },
  created () {
    this.search()
  },
  methods: {
    isPoint (isPoint) {
      this.addForm.is_point = isPoint
    },
    async search (form) {
      const res = await list(form)
      this.userObject = res.data
      this.userList = res.data.list
      this.userObject = JSON.parse(JSON.stringify(this.userObject).replace(/childs/g, 'points'))
      console.log(this.userObject)
    },
    async submitForm (form) {
      await add(form)
      this.$message.success('创建成功')
      this.search()
      this.addMenuForm = {
        pid: '',
        is_point: false,
        code: '',
        title: '',
        id: ''
      }
    },
    async remove (id) {
      await remove(id)
      this.search()
    }

  }
}
</script>

<style scoped lang='scss'>
.main{
  margin: 20px;
  padding: 20px;
  background-color: #fff;
  .header{
    display: flex;
    justify-content: end;
    padding-bottom: 20px;
  }
}
</style>